<template>
    <div class="last-box">
        <div class="last-img">
            <img src="~assets/img/27.png" alt=""/>
            <div class="container">
                <div class="warp">
                    <div class="box warp-box1" @click = "$router.push('/cateory')">
                        <h3>大成中证红利指数</h3>
                        <div class="ridus">
                            <div class="text">
                                <p>17<span>.56%</span></p>
                                <i>近三个月收益率</i>
                            </div>
                        </div>
                        <p class="money">紧密跟踪标的指数</p>
                    </div>
                    <div class="box warp-box2" @click = "$router.push('/cateory')">
                        <h3>易方达中小盘混合</h3>
                        <div class="ridus">
                            <div class="text">
                                <p>34<span>.03%</span></p>
                                <i>年化收益率</i>
                            </div>
                        </div>
                        <p class="money">连续五年正收益 穿越牛熊</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-box">
            <div class="container-warp">
                <div class="warp">
                    <div class="list list-warp">
                        <div class="list-pic">
                            <img src = "~assets/img/42.png"/>
                        </div>
                        <div class="list-text">
                            <h3>安全可靠 踏实放心</h3>
                            <p>正规金融合作伙伴，严控资金环节</p>
                        </div>
                    </div>
                    <div class="list list-warp">
                        <div class="list-pic">
                            <img src = "~assets/img/40.png"/>
                        </div>
                        <div class="list-text">
                            <h3>优质产品 收益稳健</h3>
                            <p>多维度考核，只选最优质理财产品</p>
                        </div>
                    </div>
                    <div class="list list-warp3">
                        <div class="list-pic">
                            <img src = "~assets/img/41.png"/>
                        </div>
                        <div class="list-text">
                            <h3>多闪金融的综合理财平台</h3>
                            <p>懂理财，会投资，好用更好赚</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
    .last-box{
        margin-top: 18px;
    }
    .container{
        width: 940px;
        position: absolute;
        top: 0;
        height: 100%;
        right: 200%;
        margin-left:-470px;
        animation: c 3s;
        animation-fill-mode: forwards;
    }
    .last-img{
        width: 100%;
        height: 437px;
        position: relative;
        img{
            width: 100%;
            height: 437px;
        }
        .warp{
            position: absolute;
            top: 52px;
            left: 50%;
            margin-left: -150px;
            .box{
                width:204px;
                height:291px;
                background:rgba(0,134,255,1);
                opacity:0.7;
                float: left;
                margin-right: 29px;
                text-align: center;
                position: relative;
                transition: all 2s;
                &:hover{
                    top: -10px;
                }
                h3{
                    font-size:17px;
                    color: #fff;
                    margin-top: 26px;
                }
                .ridus{
                    width:117px;
                    height:117px;
                    border:3px solid rgba(255,255,255,1);
                    opacity:0.9;
                    border-radius: 50%;
                    margin: 30px auto 60px;
                    .text{
                        margin-top: 40px;
                        p{
                            font-size:29px;
                            color: #fff;
                            span{
                                font-size: 20px;
                            }
                        }
                        i{
                            font-size:10px;
                            color: #fff;
                        }
                    }
                }
                .money{
                    font-size:10px;
                    color: #fff;
                }
            }
            .warp-box2{
                background: #5748E9;
            }
            .warp-box3{
                background: #0086FF;
            }
        }
    }
    .footer-box{
        // height: 92px;
        .container-warp{
            width: 940px;
            margin: 0 auto;
            height: 100%;
            .warp{
                width: 100%;
                height: 92px;
                margin: 28px 0 0;
                .list{
                    float: left;
                    margin: 10px 120px 0 0;
                    .list-pic{
                        float: left;
                        margin-right: 7px;
                    }
                    .list-text{
                        float: left;
                        h3{
                            font-size: 10px;
                            color: #333;
                            margin: 8px 0 11px;
                            font-weight: bold;
                        }
                        p{
                            color: #999;
                            font-size: 9px;
                        }
                    }
                }
                .list-warp3{
                    margin: 0;
                }
            }
        }
    }
     @keyframes c{
        0%{
            left: 200%;
        }
        100%{
            left: 50%;
        }
    }
</style>